<template>
	<view class="van-search flex-wrap flex-center flex-middle" @click="handleClick">
		<uni-search-bar v-model="value" :readonly="readonly" @confirm="handleConfirm" :placeholder="placeholder"
			@clear="handleClear" @cancel="handleCancel" cancelButton="none" @input="changeValue" :radius="20">
			<text slot="searchIcon" v-if="leftIcon === ' '"></text>
		</uni-search-bar>
		<slot name="action" v-if="showAction"></slot>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: ''
			}
		},
		props: {
			modelValue: {
				type: String,
				default: ""
			},
			readonly: {
				type: Boolean,
				default: false
			},
			showAction: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			leftIcon: {
				type: String,
				default: ''
			}
		},
		methods: {
			changeValue(e) {
				this.$emit("update:modelValue", e)
			},
			handleClick() {
				this.$emit('click')
			},
			handleConfirm() {
				this.$emit('confirm')
			},
			handleClear() {
				this.$emit('clear')
			},
			handleCancel() {
				this.$emit('cancel')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.van-search {
		width: 100%;

		:deep(.uni-searchbar) {
			width: 100%;
		}
	}
</style>